<template>
  <view class="bottles-container">
    <!-- 条件渲染：只有当shouldShowButton为true时才显示漂流瓶 -->
    <template v-if="shouldShowButton">
      <view
        v-for="(bottle, index) in visibleBottles"
        :key="bottle.id"
        class="bottle"
        :style="{ left: bottle.position.left + 'px', top: bottle.position.top + 'px' }"
        @tap.stop="onTapCheck(bottle)"
        :class="{
          'bottle-fade-out': bottle.isRemoving,
          'bottle-color-blue': bottle.colorType === 'blue',
          'bottle-color-green': bottle.colorType === 'green',
          'bottle-color-amber': bottle.colorType === 'amber',
          'bottle-color-purple': bottle.colorType === 'purple'
        }"
      >
        <view class="bottle-avatar" :class="{'male-avatar': bottle.gender === 'male', 'female-avatar': bottle.gender === 'female'}">
          <image class="avatar-image" :src="bottle.avatar || 'https://picsum.photos/seed/default/200'" mode="aspectFill"></image>
        </view>
        <view class="bottle-connector"></view>
        <view class="bottle-body">
          <view class="bottle-neck"></view>
          <view class="bottle-top"></view>
          <view class="bottle-water"></view>
          <view class="bottle-letter"></view>
          <view class="bottle-shine"></view>

          <!-- 添加魔法星点效果 -->
          <view class="magic-stars-container">
            <view class="magic-star star1"></view>
            <view class="magic-star star2"></view>
            <view class="magic-star star3"></view>
            <view class="magic-star star4"></view>
            <view class="magic-star star5"></view>
            <view class="magic-glow"></view>
          </view>
        </view>
      </view>
    </template>

    <!-- 将文字提示改为纯CSS3动画 -->
    <view class="bottles-collected-message" v-if="showCollectedMessage">
      <!-- 优化动画效果容器 -->
      <view class="animation-container">
        <!-- 背景光晕效果 -->
        <view class="background-glow"></view>

        <!-- 海浪动画效果(优化) -->
        <view class="ocean-wave">
          <view class="wave wave1"></view>
          <view class="wave wave2"></view>
          <view class="wave wave3"></view>
        </view>

        <!-- 新增粒子漂浮效果 -->
        <view class="floating-particles">
          <view class="particle p1"></view>
          <view class="particle p2"></view>
          <view class="particle p3"></view>
          <view class="particle p4"></view>
          <view class="particle p5"></view>
          <view class="particle p6"></view>
          <view class="particle p7"></view>
          <view class="particle p8"></view>
        </view>

        <!-- 瓶子出现动画(优化) -->
        <view class="bottles-refresh-animation">
          <view class="bottle-appear bottle1">
            <view class="bottle-shine"></view>
            <view class="bottle-letter"></view>
          </view>
          <view class="bottle-appear bottle2">
            <view class="bottle-shine"></view>
            <view class="bottle-letter"></view>
          </view>
          <view class="bottle-appear bottle3">
            <view class="bottle-shine"></view>
            <view class="bottle-letter"></view>
          </view>
        </view>

        <!-- 电竞风格加载指示器 -->
        <view class="cyber-loading">
          <view class="cyber-circle"></view>
          <view class="cyber-line line1"></view>
          <view class="cyber-line line2"></view>
          <view class="cyber-line line3"></view>
          <view class="cyber-line line4"></view>
        </view>
      </view>
    </view>

    <!-- 添加点击时的全屏特效 -->
    <view class="fullscreen-effects" v-if="showClickEffect" :style="clickEffectStyle" :class="bottleColorClass">
      <!-- 多重涟漪效果 -->
      <view class="ripple-effect ripple-1"></view>
      <view class="ripple-effect ripple-2"></view>
      <view class="ripple-effect ripple-3"></view>

      <!-- 魔法粒子爆发效果 -->
      <view class="particle-container">
        <view class="magic-particle" v-for="i in 30" :key="i" :style="particleStyles[i-1]"></view>
      </view>

      <!-- 闪光效果 -->
      <view class="flash-effect"></view>

      <!-- 星光路径效果 -->
      <view class="stardust-path"></view>
    </view>

    <!-- 使用抽取的漂流瓶内容弹窗组件 -->
    <bottle-content-modal
      :show="showBottleContent && shouldShowButton"
      :bottle-data="selectedBottle"
      :message="bottleMessage"
      :discovery-time="currentTime"
      :effect-style="clickEffectStyle"
      @close="closeBottleContent"
      @throw="throwBottle"
      @reply="replyBottle"
    />

    <!-- 添加扔漂流瓶按钮 -->
    <!-- <view class="throw-button" @tap="openThrowBottleModal" v-if="shouldShowButton">
      <text class="tn-icon-plane-fill"></text>
    </view> -->

    <!-- 使用扔漂流瓶弹窗组件 -->
    <throw-bottle-modal ref="throwBottleComponent"
                        :show="showThrowBottleModal && shouldShowButton"
                        :user-gender="userGender"
                        :effect-style="throwEffectStyle"
                        @close="closeThrowBottleModal"
                        @throw="handleThrowBottle"
                        @openVip="openVip"
                        @showUnlockBottle="showUnlockBottle"
    />
  </view>
</template>

<script>
// 导入API和工具
import { getUserPage } from '@/api/user/index.js';
import { pickBottle, createBottle, replyBottle, findAvailableBottles, confirmPickBottle } from '@/api/feed/bottle.js';
import { geocoder, calculateDistance, formatDistance } from '@/utils/mapUtils.js';
// 导入漂流瓶内容弹窗组件
import BottleContentModal from './BottleContentModal.vue';
// 导入扔漂流瓶弹窗组件
import ThrowBottleModal from './ThrowBottleModal.vue';

// 定义瓶子颜色配置
const bottleColors = [
  {
    type: 'blue',
    mainColor: '#409EFF',
    secondaryColor: '#64BAFF'
  },
  {
    type: 'green',
    mainColor: '#4CD964',
    secondaryColor: '#A5EDB1'
  },
  {
    type: 'amber',
    mainColor: '#FF9500',
    secondaryColor: '#FFCC66'
  },
  {
    type: 'purple',
    mainColor: '#A872FF',
    secondaryColor: '#D1B3FF'
  }
];

export default {
  name: "DriftingBottles",
  components: {
    BottleContentModal,
    ThrowBottleModal
  },
  props: {
    // 可以从父组件接收的一些配置
    maxBottles: {
      type: Number,
      default: 4
    },
    bottleSize: {
      type: Number,
      default: 50
    },
    // 新增瓶子逻辑宽度属性
    bottleWidth: {
      type: Number,
      default: 75 // 默认瓶子逻辑宽度，用于检测重叠
    },
    // 新增瓶子逻辑高度属性
    bottleHeight: {
      type: Number,
      default: 85 // 默认瓶子逻辑高度，用于检测重叠
    },
    // 新增属性：是否显示回到顶部按钮
    showBackToTop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visibleBottles: [], // 当前显示的漂流瓶
      containerWidth: 0, // 容器宽度
      containerHeight: 0, // 容器高度

      // 添加用户数据状态
      userBottleData: [], // 组件内部存储的用户数据
      isLoading: false, // 加载状态

      // 用户地理位置信息
      userLocation: {
        longitude: null,
        latitude: null
      },

      // 添加动画控制相关状态
      showCollectedMessage: false, // 控制是否显示全部收集完毕的消息

      // 添加点击特效相关状态
      showClickEffect: false, // 控制是否显示点击特效
      clickEffectStyle: {}, // 点击特效的样式
      bottleColorClass: '', // 保存当前点击的瓶子颜色类名
      discoveryMessage: '', // 发现消息
      particleStyles: [], // 粒子样式数组

      // 添加漂流瓶内容弹窗相关状态
      showBottleContent: false, // 控制是否显示漂流瓶内容弹窗
      selectedBottle: {}, // 当前选中的漂流瓶
      bottleMessage: '', // 漂流瓶消息内容
      currentTime: '', // 发现时间

      // 添加扔漂流瓶相关状态
      showThrowBottleModal: false, // 控制是否显示扔漂流瓶弹窗
      throwEffectStyle: {}, // 扔漂流瓶特效样式
      userGender: 'male', // 当前用户性别，可从用户信息获取
    }
  },
  created() {
	if(!this.showBackToTop){
		this.loadUserData();
	}
  },
  methods: {
    // 获取用户位置
    getUserLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          console.log('获取位置成功:', res);
          this.userLocation.longitude = res.longitude;
          this.userLocation.latitude = res.latitude;

          // 位置获取成功后加载用户数据
          this.loadUserData();
        },
        fail: (err) => {
          console.error('获取位置失败:', err);
          // 即使获取位置失败，也尝试加载用户数据
          this.loadUserData();
        }
      });
    },

    // 加载用户数据，修改添加颜色属性
    loadUserData() {
      this.isLoading = true;

      try {
        // 调用findAvailableBottles接口获取漂流瓶数据（不创建捡取记录）
        findAvailableBottles().then(res => {
          this.isLoading = false;
		  this.showCollectedMessage = false;

          // 检查返回数据是否为null或空数组
          if (res && res.length > 0) {
            console.log('获取漂流瓶数据成功:', res.length);

            // 保存漂流瓶数据
            this.userBottleData = [...res];

            // 转换为瓶子数据并分配颜色
            const bottles = res.map((bottle, index) => {
              return {
                id: bottle.id,
                content: bottle.content,
                avatar: bottle.avatar,
                gender: bottle.sex === 1 ? 'male' : 'female',
                username: bottle.nickname || '神秘用户',
                age: bottle.age,
                city: bottle.city,
				userId: bottle.userId,
                position: this.generateRandomPosition(),
                isRemoving: false,
                throwTime: bottle.throwTime,
                isAnonymous: bottle.isAnonymous,
                tag: bottle.tag
              };
            }).map((bottle, index) => this.assignBottleColor(bottle, index));

            this.visibleBottles = bottles;

            // 获取容器尺寸并设置瓶子位置
            this.$nextTick(() => {
              this.setupBottlePositions();
            });
          } else {
            console.warn('API返回的漂流瓶数据为空或null:', res);
            // 清空漂流瓶数据
            this.userBottleData = [];
            this.visibleBottles = [];

            // 显示空数据提示
            uni.showToast({
              title: '暂无漂流瓶，试试扔一个？',
              icon: 'none',
              duration: 2000
            });
          }
        }).catch(err => {
          console.error('获取漂流瓶数据失败:', err);
          this.isLoading = false;
		  this.showCollectedMessage = false;
          // 清空漂流瓶数据
          this.userBottleData = [];
          this.visibleBottles = [];

          // 显示错误提示
          uni.showToast({
            title: err.msg,
            icon: 'none',
            duration: 2000
          });
        });
      } catch (error) {
        console.error('API调用异常:', error);
        this.isLoading = false;
		this.showCollectedMessage = false;
        // 清空漂流瓶数据
        this.userBottleData = [];
        this.visibleBottles = [];

        // 显示错误提示
        uni.showToast({
          title: '系统异常，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      }
    },

    sendBottle() {
      this.$refs.throwBottleComponent.sendBottle();
    },

    // 设置瓶子位置和动画
    setupBottlePositions() {
      // 获取容器尺寸
      const systemInfo = uni.getSystemInfoSync();
      this.containerWidth = systemInfo.windowWidth;
      this.containerHeight = systemInfo.windowHeight;

      // 隐藏收集完毕消息
      this.showCollectedMessage = false;

      // 重新生成每个瓶子的位置
      this.visibleBottles.forEach((bottle, index) => {
        bottle.position = this.generateRandomPosition();
        bottle.isVisible = false;
        // 添加动画效果 - 依次显示
        setTimeout(() => {
          this.visibleBottles[index].isVisible = true;
        }, index * 200);
      });

      // 添加调试日志
      console.log('设置后的瓶子数据:', this.visibleBottles.map(b => ({
        id: b.id,
        colorType: b.colorType,
        mainColor: b.mainColor,
        gender: b.gender
      })));

      // 记录瓶子位置分布
      // this.logBottlePositions();
    },

    // 初始化漂流瓶 - 重置所有瓶子
    initBottles() {
      // 获取容器尺寸
      const systemInfo = uni.getSystemInfoSync();
      this.containerWidth = systemInfo.windowWidth;
      this.containerHeight = systemInfo.windowHeight;

      // 隐藏收集完毕消息
      this.showCollectedMessage = false;

      // 存储当前瓶子数据以便保留颜色信息
      const oldBottles = [...this.visibleBottles];

      // 清空现有漂流瓶
      this.visibleBottles = [];

      // 如果有漂流瓶数据，使用真实数据
      if (this.userBottleData && this.userBottleData.length > 0) {
        const bottleCount = Math.min(this.maxBottles, this.userBottleData.length);
        for (let i = 0; i < bottleCount; i++) {
          const bottleData = this.userBottleData[i];

          // 创建瓶子基本信息
          const bottle = {
            id: bottleData.id || `bottle-${i}-${Date.now()}`,
            avatar: bottleData.avatar,
            gender: bottleData.sex === 1 ? 'male' : 'female',
            username: bottleData.nickname || '神秘用户',
            content: bottleData.content, // 添加内容字段
			userId: bottleData.userId,
            position: this.generateRandomPosition(),
            isRemoving: false, // 添加移除状态标记
            age: bottleData.age,
            city: bottleData.location,
            throwTime: bottleData.throwTime,
            isAnonymous: bottleData.isAnonymous,
            tag: bottleData.tag
          };

          // 查找旧数据中是否有相同ID的瓶子，保留其颜色属性
          const oldBottle = oldBottles.find(b => b.id === bottle.id);
          if (oldBottle && oldBottle.colorType) {
            bottle.colorType = oldBottle.colorType;
            bottle.mainColor = oldBottle.mainColor;
            bottle.secondaryColor = oldBottle.secondaryColor;
          } else {
            // 如果没有找到或没有颜色属性，分配新颜色
            this.assignBottleColor(bottle, i);
          }

          this.visibleBottles.push(bottle);
        }

        // 添加调试日志
        console.log('初始化后的瓶子数据:', this.visibleBottles.map(b => ({
          id: b.id,
          colorType: b.colorType,
          content: b.content && b.content.substring(0, 20) + '...' // 显示部分内容
        })));

        // 添加瓶子出现时的动画效果 - 依次显示
        this.visibleBottles.forEach((bottle, index) => {
          bottle.isVisible = false;
          setTimeout(() => {
            this.visibleBottles[index].isVisible = true;
          }, index * 200);
        });

        // 记录瓶子位置分布
        // this.logBottlePositions();
      }
    },

    // 生成随机位置
    generateRandomPosition() {
      // 计算安全区域，避免漂流瓶超出屏幕
      const safeMaxX = this.containerWidth - this.bottleSize;
      const safeMaxY = this.containerHeight - this.bottleSize;

      // 确保漂流瓶不会太靠近顶部（避开导航栏和筛选区域）
      const minY = this.containerHeight * 0.25;
      const maxY = this.containerHeight * 0.55;

      // 定义逻辑宽高（用于检测重叠）- 使用直接设置的宽高属性
      const logicalWidth = this.bottleWidth; // 直接使用设置的逻辑宽度
      const logicalHeight = this.bottleHeight; // 直接使用设置的逻辑高度

      // 最大尝试次数，避免无限循环
      const maxAttempts = 50;
      let attempts = 0;
      let position;
      let hasOverlap;

      // 循环生成位置，直到找到不重叠的位置或达到最大尝试次数
      do {
        hasOverlap = false;
        // 生成随机位置
        position = {
          left: Math.floor(Math.random() * safeMaxX),
          top: Math.floor(minY + Math.random() * (maxY - minY))
        };

        // 检查与现有瓶子的重叠
        for (const bottle of this.visibleBottles) {
          // 跳过正在移除的瓶子
          if (bottle.isRemoving) continue;

          // 检查两个瓶子是否重叠（使用逻辑宽高）
          const overlapX = Math.abs(position.left - bottle.position.left) < logicalWidth;
          const overlapY = Math.abs(position.top - bottle.position.top) < logicalHeight;

          if (overlapX && overlapY) {
            hasOverlap = true;
            break; // 找到重叠，跳出循环
          }
        }

        attempts++;
      } while (hasOverlap && attempts < maxAttempts);

      // 如果尝试了最大次数仍有重叠，使用最后一个生成的位置
      // 这种情况下，瓶子可能会有一些重叠，但至少确保了程序不会卡住
      console.log(`生成位置尝试次数: ${attempts}${attempts >= maxAttempts ? ' (达到最大尝试次数)' : ''}`);

      return position;
    },

    // 预计算粒子样式
    precomputeParticleStyles() {
      this.particleStyles = [];
      for (let i = 1; i <= 30; i++) {
        const angle = Math.random() * Math.PI * 2;
        const distance = 50 + Math.random() * 150;
        const duration = 0.8 + Math.random() * 1.2;
        const delay = Math.random() * 0.3;
        const size = 3 + Math.random() * 10;

        this.particleStyles.push({
          '--angle': angle + 'rad',
          '--distance': distance + 'px',
          '--duration': duration + 's',
          '--delay': delay + 's',
          '--size': size + 'rpx',
          '--hue': (Math.random() * 60 + 160) + 'deg', // 蓝色到绿色范围
        });
      }
    },

    // 获取单个粒子的样式
    getParticleStyle(index) {
      return this.particleStyles[index - 1] || {};
    },

	onTapCheck(bottle) {
		// 在跳转前先检查资料完整度
		const isProfileComplete = this.$store.dispatch('user/forceCheckProfileCompleteness');

		// 使用Promise处理异步dispatch结果
		isProfileComplete.then(complete => {
		  if (complete) {
		    this.onBottleTap(bottle);
		  } else {
		    // 资料不完整，不执行跳转，会自动显示引导弹窗
		    console.log('资料不完整，需要先完善资料');
		  }
		});
	},

    // 点击漂流瓶的事件处理
    onBottleTap(bottle) {
      console.log('漂流瓶被点击:', bottle);
      console.log('瓶子颜色属性:', {
        colorType: bottle.colorType,
        mainColor: bottle.mainColor,
        secondaryColor: bottle.secondaryColor
      });

      // 如果瓶子正在移除中，忽略点击
      if (bottle.isRemoving) return;

      // 添加震动反馈
      uni.vibrateShort({
        success: function () {
          console.log('震动成功');
        }
      });

      // 设置瓶子正在移除状态，触发淡出动画
      const bottleIndex = this.visibleBottles.findIndex(b => b.id === bottle.id);
      if (bottleIndex !== -1) {
        this.visibleBottles[bottleIndex].isRemoving = true;
      }

      // 计算点击位置，设置特效样式
      // 瓶子中心点位置作为特效中心
      const centerX = bottle.position.left + this.bottleSize / 2;
      const centerY = bottle.position.top + this.bottleSize / 2;

      // 设置点击位置样式
      this.clickEffectStyle = {
        '--effect-center-x': centerX + 'px',
        '--effect-center-y': centerY + 'px',
      };

      // 确保瓶子有颜色类型，默认为blue
      if (!bottle.colorType) {
        // 如果瓶子没有颜色，根据索引分配一个
        const colorIndex = (bottleIndex >= 0 ? bottleIndex : 0) % bottleColors.length;
        bottle.colorType = bottleColors[colorIndex].type;
        bottle.mainColor = bottleColors[colorIndex].mainColor;
        bottle.secondaryColor = bottleColors[colorIndex].secondaryColor;
        console.log('为瓶子重新分配颜色:', bottle.colorType);
      }

      // 设置颜色类名
      this.bottleColorClass = `bottle-color-${bottle.colorType}`;
      console.log('设置特效颜色类名:', this.bottleColorClass);

      // 保存当前选中的漂流瓶信息
      this.selectedBottle = { ...bottle };

      // 使用实际漂流瓶内容
      this.bottleMessage = bottle.content;

      // 设置当前时间
      this.currentTime = this.formatDateTime(new Date());

      // 显示点击特效
      this.showClickEffect = true;

      // 调用确认捡取接口
      confirmPickBottle(bottle.id).then(bottleDetail => {
        console.log('成功捡取漂流瓶:', bottleDetail);
        // 等待一点时间后显示内容弹窗
        setTimeout(() => {
          this.showBottleContent = true;

          // 在弹窗显示后，逐渐隐藏特效，但保留光晕效果
          setTimeout(() => {
            this.showClickEffect = false;
          }, 800);
        }, 800);

      }).catch(error => {
        console.error('捡取漂流瓶失败:', error);

        if(error.code === 1018000105){
        	uni.showModal({
        	  title: '会员特权',
        	  content: error.msg,
			  showCancel: false,
        	  success: (res) => {
        	    if (res.confirm) {
        	      // 显示VIP弹窗
				  this.openVip();
        	    }
        	  }
        	});
        }else{
        	uni.showToast({
        	  title: error.msg,
        	  icon: 'none',
        	  duration: 2000
        	});
        }

        // 清除特效，不显示内容
        setTimeout(() => {
          this.showClickEffect = false;

          // 如果瓶子已经被移除，恢复它
          if (bottleIndex !== -1) {
            this.visibleBottles[bottleIndex].isRemoving = false;
          }
        }, 500);
      });
    },

    // 格式化日期时间
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    // 关闭漂流瓶内容弹窗
    closeBottleContent() {
      this.showBottleContent = false;

      // 移除当前瓶子
      this.removeBottle(this.selectedBottle);
    },

    // 扔回海里
    throwBottle() {
      this.closeBottleContent();
    },

    // 添加调试辅助方法，用于记录瓶子位置
    logBottlePositions() {
      console.log('当前漂流瓶位置分布:');
      // 创建一个表格记录每个瓶子的位置信息
      const bottleInfo = this.visibleBottles.map((bottle, index) => ({
        id: bottle.id.substring(0, 8) + '...',
        index,
        x: bottle.position.left,
        y: bottle.position.top,
        status: bottle.isRemoving ? '正在移除' : '可见'
      }));
      console.table(bottleInfo);

      // 简单的ASCII可视化
      const grid = Array(Math.ceil(this.containerHeight / 20)).fill()
        .map(() => Array(Math.ceil(this.containerWidth / 20)).fill(' '));

      this.visibleBottles.forEach((bottle, index) => {
        if (!bottle.isRemoving) {
          const x = Math.floor(bottle.position.left / 20);
          const y = Math.floor(bottle.position.top / 20);
          if (x >= 0 && y >= 0 && x < grid[0].length && y < grid.length) {
            grid[y][x] = (index + 1).toString();
          }
        }
      });

      console.log('漂流瓶位置可视化 (每格20px):');
      console.log(grid.map(row => row.join('')).join('\n'));
    },

    // 回复漂流瓶
    replyBottle() {
      // 检查是否有真实漂流瓶ID
      if (this.selectedBottle.id && !isNaN(Number(this.selectedBottle.id))) {
		// 资料已完整，直接跳转到聊天页面
		uni.navigateTo({
		  url: `/pages/chat/index?id=${this.selectedBottle.userId}`
		});

		this.closeBottleContent();

        // 弹出输入框让用户输入回复内容
        /* uni.showModal({
          title: '回复漂流瓶',
          editable: true,
          placeholderText: '输入回复内容...',
          success: (res) => {
            if (res.confirm && res.content) {
              // 调用回复API
              replyBottle({
                bottleId: this.selectedBottle.id,
                content: res.content
              }).then(() => {
                uni.showToast({
                  title: '回复成功',
                  icon: 'success',
                  duration: 2000
                });
              }).catch(err => {
                console.error('回复漂流瓶失败:', err);
                uni.showToast({
                  title: '回复失败，请稍后重试',
                  icon: 'none',
                  duration: 2000
                });
              });
            }
          }
        }); */

      } else {
        // 对于无效数据，显示错误提示
        uni.showToast({
          title: '无法回复该漂流瓶',
          icon: 'none',
          duration: 2000
        });

		this.closeBottleContent();
      }

    },

    // 移除一个漂流瓶
    removeBottle(oldBottle) {
      // 移除当前瓶子
      this.visibleBottles = this.visibleBottles.filter(item => item.id !== oldBottle.id);

      // 检查是否所有瓶子都被捡完
      if (this.visibleBottles.length === 0) {
        // 显示收集完毕消息
        this.showCollectedMessage = true;

        // 延迟一段时间后，重新加载全新的一批瓶子
        setTimeout(() => {
          this.loadUserData();
        }, 3000); // 延长时间让用户看到完成提示
      }
    },

    // 窗口大小变化时重新初始化漂流瓶
    onResize() {
      this.initBottles();
    },

    // 刷新漂流瓶 - 可以从父组件调用
    refreshBottles() {
      // 重新加载用户数据
      this.loadUserData();
    },

    // 打开扔漂流瓶弹窗
    openThrowBottleModal() {
      // 获取用户性别
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.sex !== undefined) {
        this.userGender = userInfo.sex === 1 ? 'male' : 'female';
      }

      // 设置随机效果位置
      const screenWidth = uni.getSystemInfoSync().windowWidth;
      const screenHeight = uni.getSystemInfoSync().windowHeight;
      const centerX = screenWidth / 2;
      const centerY = screenHeight / 2;

      // 为小程序做兼容处理，使用类名
      const genderColorType = this.userGender === 'male' ? 'blue' : 'pink';

      // 仅设置位置相关样式
      this.throwEffectStyle = {
        '--effect-center-x': centerX + 'px',
        '--effect-center-y': centerY + 'px'
      };

      // 使用类似瓶子的颜色类名
      this.bottleColorClass = `bottle-color-${genderColorType}`;

      // 显示弹窗
      this.showThrowBottleModal = true;

      // 添加震动反馈
      uni.vibrateShort({
        success: function () {
          console.log('震动成功');
        }
      });
    },

    // 关闭扔漂流瓶弹窗
    closeThrowBottleModal() {
      this.showThrowBottleModal = false;
    },

	// 打开vip弹窗
	openVip() {
		this.$emit('openVip');
	},

    // 显示解锁漂流瓶弹窗
    showUnlockBottle() {
        this.$emit('showUnlockBottle');
    },

    // 处理扔漂流瓶的事件
    handleThrowBottle(bottleData) {
      console.log('扔出漂流瓶:', bottleData);

      // 关闭弹窗
      this.closeThrowBottleModal();
    },

    // 创建瓶子时分配颜色
    assignBottleColor(bottle, index) {
      // 使用索引模4来循环使用四种颜色
      const colorIndex = index % bottleColors.length;

      bottle.colorType = bottleColors[colorIndex].type;
      bottle.mainColor = bottleColors[colorIndex].mainColor;
      bottle.secondaryColor = bottleColors[colorIndex].secondaryColor;

      return bottle;
    }
  },
  computed: {
    shouldShowButton() {
      return !this.showBackToTop;
    }
  }
}
</script>

<style lang="scss" scoped>
/* 漂流瓶容器样式 */
.bottles-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;

  .bottle {
    position: absolute;
    width: 100rpx;
    height: 140rpx;
    pointer-events: auto;
    z-index: 100;
    transform: rotate(5deg);
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 5rpx 15rpx rgba(0, 0, 0, 0.25));
    opacity: 1;
    transition: opacity 0.3s, transform 0.3s;

    // 添加消失动画样式
    &.bottle-fade-out {
      opacity: 0;
      transform: translateY(50rpx) rotate(45deg);
      pointer-events: none;
    }

    &:nth-child(2n) {
      animation-duration: 4s;
      animation-delay: 0.5s;
    }

    &:nth-child(3n) {
      animation-duration: 3.5s;
      animation-delay: 1s;
      transform: rotate(-8deg);
    }

    &:nth-child(4n) {
      animation-duration: 5s;
      animation-delay: 1.5s;
      transform: rotate(10deg);
    }

    .bottle-avatar {
      position: absolute;
      top: -15rpx;
      right: -15rpx;
      left: auto;
      transform: none;
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      background-color: #ffffff;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
      z-index: 3;
      border: 2rpx solid #ffffff;
      padding: 2rpx;

      &.male-avatar {
        border-color: rgba(64, 158, 255, 0.6);
      }

      &.female-avatar {
        border-color: rgba(255, 121, 168, 0.6);
      }

      .avatar-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
      }
    }

    .bottle-connector {
      display: none;
    }

    /* 性别标识 */
    .male-avatar::after {
      content: '♂';
      position: absolute;
      left: -6rpx;
      bottom: -6rpx;
      background-color: #409EFF;
      color: #ffffff;
      font-size: 16rpx;
      width: 18rpx;
      height: 18rpx;
      line-height: 18rpx;
      text-align: center;
      border-radius: 50%;
      border: 1rpx solid #ffffff;
    }

    .female-avatar::after {
      content: '♀';
      position: absolute;
      left: -6rpx;
      bottom: -6rpx;
      background-color: #FF79A8;
      color: #ffffff;
      font-size: 16rpx;
      width: 18rpx;
      height: 18rpx;
      line-height: 18rpx;
      text-align: center;
      border-radius: 50%;
      border: 1rpx solid #ffffff;
    }

    .bottle-body {
      position: relative;
      width: 100%;
      height: 100%;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 70%;
        background-color: rgba(220, 240, 250, 0.35);
        border-radius: 10rpx 10rpx 20rpx 20rpx;
        box-shadow: inset 0 0 10rpx rgba(255, 255, 255, 0.3);
      }

      .bottle-neck {
        position: absolute;
        top: 0;
        left: 40%;
        width: 20%;
        height: 40%;
        background-color: rgba(220, 240, 250, 0.35);
        border-radius: 5rpx;
      }

      .bottle-top {
        position: absolute;
        top: 0;
        left: 35%;
        width: 30%;
        height: 10%;
        background-color: rgba(220, 240, 250, 0.35);
        border-radius: 5rpx;
      }

      .bottle-water {
        position: absolute;
        bottom: 5%;
        left: 22%;
        width: 56%;
        height: 30%;
        background: linear-gradient(
          to bottom,
          rgba(164, 218, 245, 0.2),
          rgba(77, 166, 215, 0.3)
        );
        border-radius: 5rpx 5rpx 15rpx 15rpx;
        overflow: hidden;

        &::before, &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
        }

        &::before {
          top: 0;
          height: 8rpx;
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0) 100%
          );
          transform-origin: center bottom;
          animation: wave 2.5s ease-in-out infinite alternate;
        }

        &::after {
          top: 12rpx;
          height: 5rpx;
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%
          );
          transform-origin: center top;
          animation: wave 2s ease-in-out infinite alternate-reverse;
        }
      }

      .bottle-letter {
        position: absolute;
        bottom: 15%;
        left: 32%;
        width: 36%;
        height: 30%;
        background-color: rgba(255, 255, 255, 0.9);
        transform: rotate(-5deg);
        z-index: 2;
        border-radius: 3rpx;
        box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.1);
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 6rpx;
          left: 5rpx;
          right: 5rpx;
          height: 2rpx;
          background: linear-gradient(
            to right,
            rgba(150, 150, 150, 0.3) 0%,
            rgba(150, 150, 150, 0.3) 40%,
            transparent 40%,
            transparent 60%,
            rgba(150, 150, 150, 0.3) 60%,
            rgba(150, 150, 150, 0.3) 100%
          );
        }

        &::after {
          content: '';
          position: absolute;
          top: 12rpx;
          left: 5rpx;
          right: 5rpx;
          height: 2rpx;
          background: linear-gradient(
            to right,
            rgba(150, 150, 150, 0.2) 0%,
            rgba(150, 150, 150, 0.2) 70%,
            transparent 70%,
            transparent 100%
          );
        }
      }

      .bottle-shine {
        position: absolute;
        top: 35%;
        left: 64%;
        width: 10%;
        height: 10%;
        background: radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.7) 0%,
          rgba(255, 255, 255, 0) 70%
        );
        border-radius: 50%;
      }

      /* 新增：魔法星点容器 */
      .magic-stars-container {
        position: absolute;
        bottom: 5%;
        left: 22%;
        width: 56%;
        height: 30%;
        z-index: 3;
        pointer-events: none;
        border-radius: 5rpx 5rpx 15rpx 15rpx;
        overflow: hidden;

        /* 整体瓶内发光效果 */
        .magic-glow {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 70%
          );
          animation: pulse-glow 3s ease-in-out infinite alternate;
        }

        /* 星星基础样式 */
        .magic-star {
          position: absolute;
          width: 5rpx;
          height: 5rpx;
          background-color: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          filter: blur(0.5rpx);
          box-shadow: 0 0 3rpx 1rpx rgba(255, 255, 255, 0.4),
                      0 0 6rpx 2rpx rgba(255, 255, 255, 0.2);
          z-index: 4;

          /* 星星1 */
          &.star1 {
            top: 15%;
            left: 25%;
            width: 6rpx;
            height: 6rpx;
            animation: twinkle 2s ease-in-out infinite;
          }

          /* 星星2 */
          &.star2 {
            top: 60%;
            left: 40%;
            width: 4rpx;
            height: 4rpx;
            animation: twinkle 2.5s ease-in-out 0.3s infinite;
          }

          /* 星星3 */
          &.star3 {
            top: 30%;
            left: 70%;
            width: 5rpx;
            height: 5rpx;
            animation: twinkle 3s ease-in-out 0.7s infinite;
          }

          /* 星星4 */
          &.star4 {
            top: 70%;
            left: 20%;
            width: 3rpx;
            height: 3rpx;
            animation: twinkle 2.2s ease-in-out 1s infinite;
          }

          /* 星星5 */
          &.star5 {
            top: 40%;
            left: 50%;
            width: 5rpx;
            height: 5rpx;
            animation: twinkle 2.7s ease-in-out 0.5s infinite;
          }
        }
      }
    }

    /* 蓝色瓶子 */
    &.bottle-color-blue {
      .bottle-body::before,
      .bottle-neck,
      .bottle-top {
        background-color: rgba(220, 240, 250, 0.35);
      }

      .bottle-water {
        background: linear-gradient(
          to bottom,
          rgba(164, 218, 245, 0.2),
          rgba(77, 166, 215, 0.3)
        );
      }

      .bottle-letter {
        background-color: rgba(250, 250, 250, 0.9);
        transform: rotate(-3deg);
      }

      /* 蓝色瓶子的魔法星点 */
      .magic-stars-container {
        .magic-star {
          background-color: rgba(164, 218, 245, 0.9);
          box-shadow: 0 0 3rpx 1rpx rgba(164, 218, 245, 0.5),
                      0 0 6rpx 2rpx rgba(164, 218, 245, 0.3);
        }

        .magic-glow {
          background: radial-gradient(
            circle at center,
            rgba(164, 218, 245, 0.15) 0%,
            rgba(164, 218, 245, 0) 70%
          );
        }
      }
    }

    /* 绿色瓶子 */
    &.bottle-color-green {
      .bottle-body::before,
      .bottle-neck,
      .bottle-top {
        background-color: rgba(220, 250, 230, 0.35);
      }

      .bottle-water {
        background: linear-gradient(
          to bottom,
          rgba(164, 245, 191, 0.2),
          rgba(77, 215, 141, 0.3)
        );
      }

      .bottle-letter {
        background-color: rgba(245, 255, 245, 0.9);
        transform: rotate(3deg);
        bottom: 17%;

        &::before, &::after {
          background: linear-gradient(
            to right,
            rgba(100, 180, 100, 0.2) 0%,
            rgba(100, 180, 100, 0.2) 50%,
            transparent 50%,
            transparent 70%,
            rgba(100, 180, 100, 0.2) 70%,
            rgba(100, 180, 100, 0.2) 100%
          );
        }
      }

      /* 绿色瓶子的魔法星点 */
      .magic-stars-container {
        .magic-star {
          background-color: rgba(164, 245, 191, 0.9);
          box-shadow: 0 0 3rpx 1rpx rgba(164, 245, 191, 0.5),
                      0 0 6rpx 2rpx rgba(164, 245, 191, 0.3);
        }

        .magic-glow {
          background: radial-gradient(
            circle at center,
            rgba(164, 245, 191, 0.15) 0%,
            rgba(164, 245, 191, 0) 70%
          );
        }
      }
    }

    /* 琥珀色瓶子 */
    &.bottle-color-amber {
      .bottle-body::before,
      .bottle-neck,
      .bottle-top {
        background-color: rgba(250, 240, 220, 0.35);
      }

      .bottle-water {
        background: linear-gradient(
          to bottom,
          rgba(245, 218, 164, 0.2),
          rgba(215, 166, 77, 0.3)
        );
      }

      .bottle-letter {
        background-color: rgba(255, 253, 230, 0.9);
        transform: rotate(-5deg);
        bottom: 13%;
        width: 32%;
        left: 34%;
        border-radius: 4rpx;

        &::before, &::after {
          background: linear-gradient(
            to right,
            rgba(180, 150, 100, 0.25) 0%,
            rgba(180, 150, 100, 0.25) 30%,
            transparent 30%,
            transparent 60%,
            rgba(180, 150, 100, 0.25) 60%,
            rgba(180, 150, 100, 0.25) 90%,
            transparent 90%,
            transparent 100%
          );
        }
      }

      /* 琥珀色瓶子的魔法星点 */
      .magic-stars-container {
        .magic-star {
          background-color: rgba(245, 218, 164, 0.9);
          box-shadow: 0 0 3rpx 1rpx rgba(245, 218, 164, 0.5),
                      0 0 6rpx 2rpx rgba(245, 218, 164, 0.3);
        }

        .magic-glow {
          background: radial-gradient(
            circle at center,
            rgba(245, 218, 164, 0.15) 0%,
            rgba(245, 218, 164, 0) 70%
          );
        }
      }
    }

    /* 紫色瓶子 */
    &.bottle-color-purple {
      .bottle-body::before,
      .bottle-neck,
      .bottle-top {
        background-color: rgba(240, 220, 250, 0.35);
      }

      .bottle-water {
        background: linear-gradient(
          to bottom,
          rgba(218, 164, 245, 0.2),
          rgba(166, 77, 215, 0.3)
        );
      }

      .bottle-letter {
        background-color: rgba(250, 240, 255, 0.9);
        transform: rotate(4deg);
        width: 34%;
        height: 32%;
        bottom: 16%;

        &::before, &::after {
          background: linear-gradient(
            to right,
            rgba(180, 100, 180, 0.2) 0%,
            rgba(180, 100, 180, 0.2) 45%,
            transparent 45%,
            transparent 55%,
            rgba(180, 100, 180, 0.2) 55%,
            rgba(180, 100, 180, 0.2) 100%
          );
        }
      }

      /* 紫色瓶子的魔法星点 */
      .magic-stars-container {
        .magic-star {
          background-color: rgba(218, 164, 245, 0.9);
          box-shadow: 0 0 3rpx 1rpx rgba(218, 164, 245, 0.5),
                      0 0 6rpx 2rpx rgba(218, 164, 245, 0.3);
        }

        .magic-glow {
          background: radial-gradient(
            circle at center,
            rgba(218, 164, 245, 0.15) 0%,
            rgba(218, 164, 245, 0) 70%
          );
        }
      }
    }
  }

  /* 全屏点击特效容器 */
  .fullscreen-effects {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;

    /* 光圈扩散效果 */
    .ripple-effect {
      position: absolute;
      top: var(--effect-center-y, 50%);
      left: var(--effect-center-x, 50%);
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0) 70%
      );
      opacity: 0.8;

      &.ripple-1 {
        animation: ripple-expand 1.5s ease-out forwards;
      }

      &.ripple-2 {
        animation: ripple-expand 1.5s ease-out 0.2s forwards;
        opacity: 0.6;
      }

      &.ripple-3 {
        animation: ripple-expand 1.5s ease-out 0.4s forwards;
        opacity: 0.4;
      }
    }

    /* 魔法粒子爆发效果容器 */
    .particle-container {
      position: absolute;
      top: var(--effect-center-y, 50%);
      left: var(--effect-center-x, 50%);
      transform: translate(-50%, -50%);

      /* 魔法粒子 */
      .magic-particle {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--size, 5rpx);
        height: var(--size, 5rpx);
        background-color: white;
        border-radius: 50%;
        filter: blur(1px);
        opacity: 0;
        box-shadow: 0 0 8rpx 3rpx hsl(var(--hue, 180deg), 100%, 70%);
        animation: particle-explode var(--duration, 1s) ease-out var(--delay, 0s) forwards;
        transform-origin: center center;
        --x: calc(cos(var(--angle)) * var(--distance));
        --y: calc(sin(var(--angle)) * var(--distance));
      }
    }

    /* 闪光效果 */
    .flash-effect {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(
        circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      opacity: 0;
      animation: flash 0.8s ease-out forwards;
    }

    /* 星光路径 */
    .stardust-path {
      position: absolute;
      top: var(--effect-center-y, 50%);
      left: var(--effect-center-x, 50%);
      width: 2px;
      height: 2px;
      background-color: white;
      box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
      opacity: 0;
      border-radius: 50%;
      animation: stardust 1.5s ease-out forwards;
      z-index: 1001;
    }
  }

  /* 针对不同瓶子颜色类型的特效样式 */
  .fullscreen-effects.bottle-color-blue {
    .ripple-effect {
      box-shadow: 0 0 30rpx 10rpx #409EFF;
    }

    .flash-effect {
      background: radial-gradient(
        circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
        #409EFF 0%,
        rgba(255, 255, 255, 0) 70%
      );
    }

    .stardust-path {
      box-shadow: 0 0 20px 10px #409EFF;
    }

    .magic-particle {
      box-shadow: 0 0 8rpx 3rpx #64BAFF;
    }
  }

  .fullscreen-effects.bottle-color-green {
    .ripple-effect {
      box-shadow: 0 0 30rpx 10rpx #4CD964;
    }

    .flash-effect {
      background: radial-gradient(
        circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
        #4CD964 0%,
        rgba(255, 255, 255, 0) 70%
      );
    }

    .stardust-path {
      box-shadow: 0 0 20px 10px #4CD964;
    }

    .magic-particle {
      box-shadow: 0 0 8rpx 3rpx #A5EDB1;
    }
  }

  .fullscreen-effects.bottle-color-amber {
    .ripple-effect {
      box-shadow: 0 0 30rpx 10rpx #FF9500;
    }

    .flash-effect {
      background: radial-gradient(
        circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
        #FF9500 0%,
        rgba(255, 255, 255, 0) 70%
      );
    }

    .stardust-path {
      box-shadow: 0 0 20px 10px #FF9500;
    }

    .magic-particle {
      box-shadow: 0 0 8rpx 3rpx #FFCC66;
    }
  }

  .fullscreen-effects.bottle-color-purple {
    .ripple-effect {
      box-shadow: 0 0 30rpx 10rpx #A872FF;
    }

    .flash-effect {
      background: radial-gradient(
        circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
        #A872FF 0%,
        rgba(255, 255, 255, 0) 70%
      );
    }

    .stardust-path {
      box-shadow: 0 0 20px 10px #A872FF;
    }

    .magic-particle {
      box-shadow: 0 0 8rpx 3rpx #D1B3FF;
    }
  }

  /* 添加所有瓶子收集完毕的提示样式 */
  .bottles-collected-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 20rpx;
    padding: 40rpx;
    width: 380rpx;
    height: 380rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 101;
    overflow: hidden;
    box-shadow: 0 0 30rpx rgba(179, 247, 60, 0.3);
    border: 1px solid rgba(179, 247, 60, 0.2);

    /* 添加霓虹边框效果 */
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20rpx;
      border: 2px solid transparent;
      background: linear-gradient(45deg, #B3F73C, #00C4FF) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      animation: borderGlow 3s infinite alternate;
      opacity: 0.5;
    }

    .animation-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      perspective: 1000px;
    }

    /* 背景光晕效果 */
    .background-glow {
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      background: radial-gradient(
        ellipse at center,
        rgba(179, 247, 60, 0.15) 0%,
        rgba(0, 196, 255, 0.1) 25%,
        rgba(0, 0, 0, 0) 70%
      );
      animation: rotateGlow 8s linear infinite;
    }

    /* 海浪动画效果(优化) */
    .ocean-wave {
      position: absolute;
      width: 120%;
      height: 140rpx;
      bottom: -20rpx;
      left: -10%;
      overflow: hidden;

      .wave {
        position: absolute;
        width: 200%;
        height: 100%;
        border-radius: 40% 40% 0 0;
        bottom: -80rpx;

        &.wave1 {
          background: linear-gradient(180deg, rgba(179, 247, 60, 0.4) 0%, rgba(179, 247, 60, 0.1) 100%);
          animation: wave 8s linear infinite;
          z-index: 1;
          opacity: 0.5;
          height: 120%;
        }

        &.wave2 {
          background: linear-gradient(180deg, rgba(0, 196, 255, 0.3) 0%, rgba(0, 196, 255, 0.1) 100%);
          animation: wave 10s linear -2s infinite;
          z-index: 2;
          opacity: 0.4;
          height: 110%;
        }

        &.wave3 {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
          animation: wave 7s linear -1s infinite;
          z-index: 3;
          opacity: 0.3;
          height: 105%;
        }
      }
    }

    /* 粒子漂浮效果 */
    .floating-particles {
      position: absolute;
      width: 100%;
      height: 100%;

      .particle {
        position: absolute;
        border-radius: 50%;
        background: #B3F73C;
        opacity: 0.6;
        filter: blur(1px);
        animation: floatParticle 6s ease-in-out infinite;

        &.p1 {
          width: 10rpx;
          height: 10rpx;
          top: 20%;
          left: 80%;
          animation-delay: -0.5s;
          animation-duration: 7s;
          background: rgba(179, 247, 60, 0.8);
          box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
        }

        &.p2 {
          width: 6rpx;
          height: 6rpx;
          top: 35%;
          left: 25%;
          animation-delay: -1.5s;
          animation-duration: 8s;
          background: rgba(0, 196, 255, 0.8);
          box-shadow: 0 0 8rpx rgba(0, 196, 255, 0.5);
        }

        &.p3 {
          width: 8rpx;
          height: 8rpx;
          top: 70%;
          left: 30%;
          animation-delay: -3s;
          animation-duration: 9s;
          background: rgba(179, 247, 60, 0.8);
          box-shadow: 0 0 9rpx rgba(179, 247, 60, 0.5);
        }

        &.p4 {
          width: 5rpx;
          height: 5rpx;
          top: 80%;
          left: 70%;
          animation-delay: -4s;
          animation-duration: 6s;
          background: rgba(0, 196, 255, 0.8);
          box-shadow: 0 0 7rpx rgba(0, 196, 255, 0.5);
        }

        &.p5 {
          width: 7rpx;
          height: 7rpx;
          top: 40%;
          left: 85%;
          animation-delay: -2.5s;
          animation-duration: 7.5s;
          background: rgba(179, 247, 60, 0.8);
          box-shadow: 0 0 8rpx rgba(179, 247, 60, 0.5);
        }

        &.p6 {
          width: 9rpx;
          height: 9rpx;
          top: 60%;
          left: 15%;
          animation-delay: -5s;
          animation-duration: 8.5s;
          background: rgba(0, 196, 255, 0.8);
          box-shadow: 0 0 9rpx rgba(0, 196, 255, 0.5);
        }

        &.p7 {
          width: 4rpx;
          height: 4rpx;
          top: 25%;
          left: 55%;
          animation-delay: -1s;
          animation-duration: 6.5s;
          background: rgba(179, 247, 60, 0.8);
          box-shadow: 0 0 6rpx rgba(179, 247, 60, 0.5);
        }

        &.p8 {
          width: 6rpx;
          height: 6rpx;
          top: 75%;
          left: 45%;
          animation-delay: -3.5s;
          animation-duration: 7s;
          background: rgba(0, 196, 255, 0.8);
          box-shadow: 0 0 8rpx rgba(0, 196, 255, 0.5);
        }
      }
    }

    /* 瓶子出现动画 - 优化 */
    .bottles-refresh-animation {
      position: absolute;
      width: 100%;
      height: 180rpx;
      top: 80rpx;
      display: flex;
      justify-content: center;
      transform-style: preserve-3d;

      .bottle-appear {
        position: absolute;
        width: 40rpx;
        height: 70rpx;
        background: rgba(179, 247, 60, 0.7);
        border-radius: 10rpx 10rpx 45% 45%;
        opacity: 0;
        transform: translateY(60rpx) translateZ(0);
        box-shadow: 0 5rpx 15rpx rgba(179, 247, 60, 0.3);
        transform-style: preserve-3d;

        &:before {
          content: '';
          position: absolute;
          top: -15rpx;
          width: 25rpx;
          height: 15rpx;
          background: rgba(179, 247, 60, 0.7);
          left: 7.5rpx;
          border-radius: 50% 50% 0 0;
        }

        /* 瓶子内的闪光效果 */
        .bottle-shine {
          position: absolute;
          top: 15%;
          right: 15%;
          width: 10rpx;
          height: 10rpx;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          filter: blur(1px);
          animation: shine 2s ease-in-out infinite;
        }

        /* 瓶子内的信件效果 */
        .bottle-letter {
          position: absolute;
          bottom: 15%;
          left: 25%;
          width: 50%;
          height: 40%;
          background: rgba(255, 255, 255, 0.9);
          transform: rotate(-5deg);
          border-radius: 2rpx;

          &::after {
            content: '';
            position: absolute;
            top: 30%;
            left: 10%;
            width: 80%;
            height: 2rpx;
            background: rgba(0, 0, 0, 0.1);
            box-shadow: 0 6rpx 0 rgba(0, 0, 0, 0.05);
          }
        }

        &.bottle1 {
          left: 80rpx;
          animation: bottleAppear 4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s infinite;
          background: rgba(179, 247, 60, 0.7);

          &:before {
            background: rgba(179, 247, 60, 0.7);
          }
        }

        &.bottle2 {
          animation: bottleAppear 4s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s infinite;
          background: rgba(0, 196, 255, 0.7);

          &:before {
            background: rgba(0, 196, 255, 0.7);
          }
        }

        &.bottle3 {
          right: 80rpx;
          animation: bottleAppear 4s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s infinite;
          background: rgba(179, 247, 60, 0.7);

          &:before {
            background: rgba(179, 247, 60, 0.7);
          }
        }
      }
    }

    /* 电竞风格加载指示器 */
    .cyber-loading {
      position: absolute;
      bottom: 50rpx;
      width: 80rpx;
      height: 80rpx;

      .cyber-circle {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid rgba(179, 247, 60, 0.3);
        border-top: 2px solid #B3F73C;
        border-radius: 50%;
        animation: rotateLoader 1.5s linear infinite;
      }

      .cyber-line {
        position: absolute;
        width: 2px;
        height: 15rpx;
        background: #B3F73C;
        top: 50%;
        left: 50%;
        transform-origin: 0 0;

        &.line1 {
          transform: rotate(0deg);
          animation: pulseLine 1s ease-in-out infinite;
        }

        &.line2 {
          transform: rotate(90deg);
          animation: pulseLine 1s ease-in-out 0.25s infinite;
        }

        &.line3 {
          transform: rotate(180deg);
          animation: pulseLine 1s ease-in-out 0.5s infinite;
        }

        &.line4 {
          transform: rotate(270deg);
          animation: pulseLine 1s ease-in-out 0.75s infinite;
        }
      }
    }
  }

  /* 添加扔漂流瓶按钮样式 */
  .throw-button {
    position: fixed;
    bottom: 200rpx;
    right: 40rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #409EFF, #64BAFF);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5rpx 20rpx rgba(64, 158, 255, 0.5);
    z-index: 102;
    pointer-events: auto;

    &:active {
      transform: scale(0.95);
    }

    .tn-icon-plane-fill {
      font-size: 48rpx;
      color: #FFFFFF;
    }
  }
}

/* 光圈扩散动画 */
@keyframes ripple-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 1000rpx;
    height: 1000rpx;
    opacity: 0;
  }
}

/* 粒子爆炸动画 */
@keyframes particle-explode {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
}

/* 闪光效果动画 */
@keyframes flash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}

/* 星光路径动画 */
@keyframes stardust {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

/* 消息出现动画 */
@keyframes message-appear {
  0% {
    transform: translateX(-50%) translateY(20rpx);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* 旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 添加出现动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 添加星星闪烁动画 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
    box-shadow: 0 0 2rpx 0rpx rgba(255, 255, 255, 0.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 5rpx 2rpx rgba(255, 255, 255, 0.6);
  }
}

/* 添加整体发光脉冲效果 */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes wave {
  0% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(-25%) rotate(3deg);
  }
  100% {
    transform: translateX(-50%) rotate(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(var(--rotate, 5deg));
  }
  50% {
    transform: translateY(-10rpx) rotate(var(--rotate, 5deg));
  }
}

@keyframes bottleAppear {
  0% {
    opacity: 0;
    transform: translateY(80rpx) rotate(-5deg) translateZ(0);
  }
  15% {
    opacity: 1;
    transform: translateY(10rpx) rotate(5deg) translateZ(20rpx);
  }
  25% {
    transform: translateY(-30rpx) rotate(-2deg) translateZ(40rpx);
  }
  40% {
    transform: translateY(-60rpx) rotate(3deg) translateZ(60rpx);
  }
  60% {
    opacity: 1;
    transform: translateY(-90rpx) rotate(-3deg) translateZ(40rpx);
  }
  80% {
    opacity: 0.5;
    transform: translateY(-120rpx) rotate(2deg) translateZ(20rpx);
  }
  100% {
    opacity: 0;
    transform: translateY(-150rpx) rotate(0) translateZ(0);
  }
}

@keyframes dotPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

/* 粒子漂浮动画 */
@keyframes floatParticle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-15rpx) translateX(10rpx);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-30rpx) translateX(-10rpx);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-15rpx) translateX(5rpx);
    opacity: 0.4;
  }
}

/* 加载循环动画 */
@keyframes rotateLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 线条脉冲动画 */
@keyframes pulseLine {
  0% {
    height: 15rpx;
    opacity: 0.5;
  }
  50% {
    height: 25rpx;
    opacity: 1;
  }
  100% {
    height: 15rpx;
    opacity: 0.5;
  }
}

/* 瓶内闪光动画 */
@keyframes shine {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* 背景旋转动画 */
@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 霓虹边框闪烁动画 */
@keyframes borderGlow {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.8;
  }
}
</style>
